<template>
  <el-aside :width="width">
    <el-menu
        :collapse-transition="false"
        background-color="#545c64"
        text-color="#fff"
        :collapse="isCollapse"
        :default-active="activeMenu"
      >
      <h3 v-show="!isCollapse">后台管理系统</h3>
      <h3 v-show="isCollapse">后台</h3>
      <el-menu-item 
        v-for="item in noChildren"
        :index="item.path"
        :key="item.path"
        @click="handPath(item)"
      >
            <component class="icons" :is="item.icon" />
            <span>{{item.label}}</span>
        </el-menu-item>
        <el-sub-menu
            v-for="item in hasChildren"
        >
          <template #title>
            <component class="icons" :is="item.icon" />
            <span>{{item.label}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item 
            v-for="subitem in item.children"
            :index="subitem.path"
            :key="subitem.path"
             @click="handPath(subitem)"
            >
            <component class="icons" :is="subitem.icon" />
            <span>{{subitem.label}}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        
        
    </el-menu>
    
  </el-aside>
</template>

<script setup>
import {ref ,computed} from 'vue';
import {useStore} from "@/stroes"
import { useRoute,useRouter } from 'vue-router';
    const route = useRoute();
    const router = useRouter();

    const list = ref([
        {
            path: '/home',
            label: '首页',
            icon: 'house',
        }, {
            path: '/user',
            label: '用户管理',
            icon: 'user',
        },{
            label: '其它',
            icon: 'location',
            children:[
                { 
                    path: '/excel',
                    label: 'Excel',
                    icon: 'position',
                },
            ]
        },
       
    ])
    const noChildren = computed(()=>list.value.filter(item=>!item.children))
    const hasChildren = computed(()=>list.value.filter(item=>item.children))
    const store = useStore()
    const isCollapse= computed(()=>store.isCollapse);
    const width =computed(()=>store.isCollapse ? '64px' :'180px');
    const activeMenu=computed(()=>route.path)
    const handPath=(item)=>{
        router.push(item.path)
        store.selectMenu(item)
    }
</script>

<style lang="less" scoped>
.el-aside{
    height: 100%;
    background-color: #545c64;
    
}
.el-menu{
    border: none;
}
h3{
        color: #fff;
        text-align: center;
        line-height: 22px;
    }
.icons{
    width: 18px;
    height: 18px;
}

</style>